<template>
  <div class="knowledgeData">
    <!-- 筛选条件 -->
    <ContentWrap>
      <el-form
        ref="queryFormRef"
        class="-mb-15px"
        :model="queryParams"
        :inline="false"
        label-width="130px"
        @submit.prevent
      >
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="名称" prop="name">
              <el-input v-model="queryParams.name" placeholder="请输入名称" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="18" class="text-right">
            <el-form-item>
              <el-button type="primary" @click="handleQuery" v-hasPermi="['bussiness:knowledge-base:query']">查询</el-button>
              <el-button @click="resetQuery">重置</el-button>
              <el-button type="primary" @click="handleAdd" v-hasPermi="['bussiness:knowledge-base:create']">新增</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </ContentWrap>
    <!-- 知识库内容 -->
    <ContentWrap>
      <!-- 方块筛选条件 -->
      <!-- <div class="search-box"></div> -->
      <!-- 文件列表 -->
      <div class="file-list">
        <FileCard
          ref="fileCard"
          v-for="(item, index) in cardData"
          :key="index"
          :item="item"
          :cardActive="a"
          :isShowMore="true"
          @handle-edit="handleEdit"
          @get-lists="getLists"
          @preview-file="handleView"
        />
      </div>
      <!-- 分页 -->
      <Pagination
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getLists"
      />
      <KnowledgeDataAdd ref="knowledgeDataAddRef" @success="getLists" />
      <PreviewModal ref="previewModalRef" />
    </ContentWrap>
  </div>
</template>

<script lang="ts" setup name="KnowledgeData">
import * as KnowledgeDataApi from '@/api/patient/knowledgeData'
import FileCard from './components/fileCard.vue'
import KnowledgeDataAdd from './components/knowledgeDataAdd.vue'
import PreviewModal from '@/components/PreviewModal/PreviewModal.vue'
const total = ref(0) // 列表的总页数
const queryParams = reactive({
  name: undefined,
  pageNo: 1,
  pageSize: 12
})
const a = []
// const cardData = [
//   {
//     id: 1,
//     status: '01',
//     numberName: 'GB/T51447-2021：建筑信息模型存储标准',
//     publishDate: '2024-02-02',
//     execDate: '2024-02-02',
//     abortDate: '2024-02-02',
//     name: 'asda'
//   },
//   {
//     id: 2,
//     status: '01',
//     numberName: 'GB/T51447-2021：建筑信息模型存储标准',
//     publishDate: '2024-02-02',
//     execDate: '2024-02-02',
//     abortDate: '2024-02-02',
//     name: 'asda'
//   },
//   {
//     id: 34,
//     status: '01',
//     numberName: 'GB/T51447-2021：建筑信息模型存储标准',
//     publishDate: '2024-02-02',
//     execDate: '2024-02-02',
//     abortDate: '2024-02-02',
//     name: 'asda'
//   },
//   {
//     id: 4,
//     status: '01',
//     numberName: 'GB/T51447-2021：建筑信息模型存储标准',
//     publishDate: '2024-02-02',
//     execDate: '2024-02-02',
//     abortDate: '2024-02-02',
//     name: 'asda'
//   },
//   {
//     id: 5,
//     status: '01',
//     numberName: 'GB/T51447-2021：建筑信息模型存储标准',
//     publishDate: '2024-02-02',
//     execDate: '2024-02-02',
//     abortDate: '2024-02-02',
//     name: 'asda'
//   },
//   {
//     id: 6,
//     status: '01',
//     numberName: 'GB/T51447-2021：建筑信息模型存储标准',
//     publishDate: '2024-02-02',
//     execDate: '2024-02-02',
//     abortDate: '2024-02-02',
//     name: 'asda'
//   },
//   {
//     id: 7,
//     status: '01',
//     numberName: 'GB/T51447-2021：建筑信息模型存储标准',
//     publishDate: '2024-02-02',
//     execDate: '2024-02-02',
//     abortDate: '2024-02-02',
//     name: 'asda'
//   }
// ]
const cardData = ref([])
const getLists = async () => {
  const data = await KnowledgeDataApi.getKnowledgeData(queryParams)
  cardData.value = data.list
  total.value = data.total
}

const knowledgeDataAddRef = ref()
// 新增按钮操作
const handleAdd = () => {
  knowledgeDataAddRef.value.open('action.add', null)
}
// 编辑按钮操作
const handleEdit = (item: any) => {
  const newItem = { ...item }
  knowledgeDataAddRef.value.open('action.edit', newItem)
}
// 查询按钮操作
const handleQuery = () => {
  getLists()
}
const queryFormRef = ref()
const resetQuery = () => {
  //form表单重置
  queryFormRef.value?.resetFields()
  handleQuery()
}

//预览按钮
const previewModalRef = ref()
const handleView = (url: any) => {
  previewModalRef.value.open(url)
}

onMounted(() => {
  getLists()
})
</script>

<style lang="scss" scoped>
.text-right {
  display: flex;
  justify-content: flex-end;
}
.search-box {
  width: 100%;
  height: 100px;
  margin-bottom: 10px;
}
.file-list {
  width: 100%;
  // height: 550px;
  height: 600px;
  position: relative;
  display: grid;
  grid-auto-rows: 150px;
  grid-template-columns: repeat(3, 1fr);
  flex: 1;
  gap: 9px;
  overflow-y: auto;
}
</style>